<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <router-view></router-view>
    </div>
    <script src="./vue.js"></script>
    <script src="./vue-router.js"></script>
    <script>
     const gold = {
         template:`
          <div>金币商城</div>
         `
     }
     const nav = {
         template:`
         <div>
           <router-view></router-view>
           <nav>
            <router-link to="/nav/index">首页</router-link>
            <router-link to="/nav/order">订单</router-link>
            <router-link to="/nav/discover">发现</router-link>
            <router-link to="/nav/profile">我的</router-link>
           </nav>
         
         </div>
         `
     }
    

   const index = {
       template:`
        <div>首页</div>
       `
   }
   const order = {
       template:`
        <div>订单</div>
       `
   }
   const discover = {
       template:`
        <div>发现</div>
       `
   }
   const profile = {
       template:`
       <div>我的
        <router-link to="/gold">金币商城入口</router-link>
       </div>
       `
   }
   const demo = {
       template:`
        <div>demo</div>
       `
   }

   const routes = [
       {
          path:'/gold',
          component:gold
       },
       {
           path:'/nav',
           component:nav,
           children:[
        {
           path:'index',
           component:index
       },
       {
           path:'order',
           component:order
       },
       {
           path:'discover',
           component:discover
       },
       {
           path:'profile',
           component:profile
       },
         {
            path:'demo',
            component:demo
         }
       ]
       },
   ]
    const router = new VueRouter({
        routes
    })
    const app = new Vue({
        el:'#app',
        router
    })
    </script>
</body>
</html>